//index页面 主页面
import React from 'react'
import { Outlet,useNavigate} from "react-router-dom"
import { Badge, TabBar } from 'antd-mobile'
import "../css/Index.css"
import { Cart, Category, Home, User } from '@nutui/icons-react'

export default function Index() {
    const tabs = [
        {
            key: '/index/home',
            title: '首页',
            icon: <Cart />,
            badge: Badge.dot,
        },
        {
            key: '/index/classify',
            title: '待办',
            icon: <Category />,
            badge: '5',
        },
        {
            key: '/index/scart',
            title: '消息',
            icon: (active) =>
                active ? <Home /> : <Home />,
            badge: '99+',
        },
        {
            key: '/index/mine',
            title: '我的',
            icon: <User />,
        },
    ]
    const navigate = useNavigate()

    return (
        <div>
            <Outlet></Outlet>
            <TabBar onChange={(e)=>{
                navigate(e)
            }} className="i1">
                {tabs.map(item => (
                    <TabBar.Item
                        key={item.key}
                        icon={item.icon}
                        title={item.title}
                        badge={item.badge}
                    />
                ))}
            </TabBar>
        </div>
    )
}
